<template>
  <div class="help">
    <!-- 标题 -->
    <div class="title">收益</div>
    <!-- 标签页分页 -->
    <div class="order_item">
      <van-tabs v-model="active">
          <!-- 全部 -->
        <van-tab title="全部">
            <span v-for="order in orderData" :key="order.id" @click="toDetail(order)">
              <div class="all">
              <!-- 头像 -->
                <van-image
                  round
                  width="80px"
                  height="80px"
                  :src="order.customer.userFace"/>
                <!-- 收益信息 -->
                <div class="flex_item2">
                  <!-- 用户名 -->
                  <span class="name">{{order.customer.username}}</span>
                  <!-- 状态 -->
                  <span class="status">{{order.status}}</span>
                  <!-- 地址 -->
                  <p class="address">
                    {{
                      order.address.province+
                      order.address.city+
                      order.address.area+
                      order.address.address
                    }}
                  </p>
                  <div class="date_pirce">
                    <!-- 时间 -->
                    <div class="date">
                      {{moment(order.orderTime).format("YYYY-MM-DD HH:mm:SS")}}
                    </div>
                    <!-- 金额 -->
                    <div class="pirce">¥{{order.total}}</div>
                  </div>
                </div>
              </div>
            </span>
        </van-tab>
        <!-- 提现 -->
        <van-tab title="提现">
          <span v-for="apply in applyData" :key="apply.id">
            <div class="tixian">
              <div class="text">
                <!-- 类型 -->
                <span class="name">{{apply.applyType}}-到银行卡</span>
                <!-- 金额 -->
                <span class="num">¥{{apply.money}}</span>
              </div>
              <!-- 时间 -->
              <div class="date1">{{moment(apply.applyTime).format("YYYY-MM-DD HH:mm:SS")}}</div>
              <!-- 状态 -->
              <div class="status">{{apply.status}}</div>
            </div>
          </span>
        </van-tab>
      </van-tabs>
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
// 引入axios
import {get} from '@/http/axios'
// 引入vuex的辅助函数
import {mapActions, mapState} from 'vuex'
const moment = require('moment')
export default {
  data() {
    return {
      active: 2,
    }
  },
  computed:{
    ...mapState('order',['orderData']),
    ...mapState('apply',['applyData']),
    ...mapState('user',['userInfo']),
  },
  methods: {
    // 时间戳转换方法
    moment,
    ...mapActions('order',['getAllOrderData']),
    ...mapActions('apply',['getApply']),

    // 获取订单数据
    queryorder(){
      let data = {
        page: 1,
        pageSize: 100,
        status:"已完成",
        employeeId: this.userInfo.id,
      }
      this.getAllOrderData(data)
    },

    // 获取账户信息
    queryApply(){
      let data = {
        page: 1,
        pageSize: 100,
        applyType: "提现",
        employeeId: this.userInfo.id,
      }
      this.getApply(data)
    },
    // 跳转到订单详情
    toDetail(order) {
      // 使用編程式导航进行路由的跳转
      this.$router.push({
        path: "/detail",
        query: {
          order,
        },
      });
    },
  },
  created() {
    // 获取订单数据
    this.queryorder()
    // 获取账户信息
    this.queryApply()
  },
}
</script>

<style scoped>
.header {
  color: #fff;
  letter-spacing: .4em;
}
.title {
  width: 100%;
  height: 58px;
  background-image: linear-gradient(90deg, #bf73ff, #7579ff);
  text-align: center;
  line-height: 58px;
  color: #fff;
  letter-spacing: 0.4em;
}
.order_item {
  box-sizing: border-box;
  width: 100%;
  margin-top: 1em;
  padding: 0 2em;
}
.tixian {
 width: 90%;
height: 80px;
margin: 0 auto;
margin-top: 0px;
margin-top: 1em;
border-radius: 5px;
padding: .5em 1em;
color: #999;
box-shadow: 0 0 10px #ccc;
}

.all {
  width: 93%;
  height: 87px;
  margin: 20px 0;
  box-shadow: 0 0 6px 0 #ccc;
  display: flex;
  padding: 1em 1em;
}
.flex_item2 {
  margin-left: 1em;
  flex: 2;
  height: 80px;
}
.flex_item2 .status {
  float: right;
  font-size: 11px;
  color: #f8825d;
}
.flex_item2 .address {
  font-size: 12px;
  margin-top: 1em;
  color: #666;
}
.flex_item2 .date_pirce {
  margin-top: 1em;
  font-size: 12px;
}
.flex_item2 .date_pirce .date {
  font-size: 12px;
  float: left;
}
.flex_item2 .date_pirce .pirce {
  font-size: 12px;
  float: right;
  text-align: right;
}
.text {
  color: #999;
}
.text .name{
color: #333;
font-weight: 300;
}
.text .num{
float: right;
color: #333;
}
.tixian .date1{
margin-top: 2em;
font-size: 11px;
float: left;
color: #999;
}
.tixian .status{
float: right;
font-size: 11px;
margin-top: 2em;
color: #f8825d;
}
</style>